<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增任务-接口关联关系')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-task_interface_relation-add">
            <div class="form-group">
                <label class="col-sm-2 control-label is-required">任务：</label>
                <div class="col-sm-8">
                    <select id="taskId" name="taskId" class="form-control m-b" required>
                        <option value="">空</option>
                        <option th:each="task:${taskList}" th:value="${task.taskId}" th:text="${task.desc}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label is-required">接口：</label>
                <div class="col-sm-8">
                    <select id="interfaceId" name="interfaceId" class="form-control m-b" required>
                        <option value="">空</option>
                        <option th:each="interface:${interfaceList}" th:value="${interface.interfaceId}" th:text="${interface.desc}" th:data-queryParam='${interface.queryParam}' th:data-bodyParam='${interface.bodyParam}' th:data-pathParam='${interface.pathParam}'></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label is-required">描述信息：</label>
                <div class="col-sm-8">
                    <input id="description" name="description" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">主机：</label>
                <div class="col-sm-8">
                    <input name="host" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">端口：</label>
                <div class="col-sm-8">
                    <input name="port" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">可选依赖：</label>
                <div class="col-sm-8">
                    <select id="fullRelationIds" name="fullRelationIds" class="form-control m-b" multiple style="height: 150px">
                        <option ondblclick="chooseRelation(this)" th:each="relation:${fullRelationList}" th:value="${relation.relationId}" th:text="${relation.description}" th:disabled="${relation.status == '1'}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">已选依赖：</label>
                <div class="col-sm-8">
                    <select id="dependRelationIds" name="dependRelationIds" class="form-control m-b" multiple style="height: 150px">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" th:title="${expDesc}"><i class="fa fa-question-circle-o"></i>依赖参数：</label>
                <div class="col-sm-8">
                    <!--<textarea oninput="suggest(this)" name="dependParam" class="form-control"></textarea>-->
                    <textarea id="dependParam" name="dependParam" class="form-control"></textarea>
                </div>
                <ul class="col-sm-2" id="suggest"></ul>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">content_type：</label>
                <div class="col-sm-8">
                    <input name="contentType" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">query参数：</label>
                <div class="col-sm-8">
                    <textarea name="queryParam" id="queryParam" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">body参数：</label>
                <div class="col-sm-8">
                    <textarea name="bodyParam" id="bodyParam" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">path参数：</label>
                <div class="col-sm-8">
                    <textarea name="pathParam" id="pathParam" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">登录配置：</label>
                <div class="col-sm-8">
                    <select name="loginConfigId" class="form-control m-b">
                        <option value="">空</option>
                        <option th:each="loginConfig:${loginConfigs}" th:value="${loginConfig.loginConfigId}" th:text="${loginConfig.desc}" th:disabled="${loginConfig.status == '1'}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var expNames = [[${expNames}]];
        var suggestArray = expNames.split(',');

        var prefix = ctx + "tester/task_interface_relation"
        $("#form-task_interface_relation-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $('#dependRelationIds option').prop("selected", true);
                $.operate.save(prefix + "/add", $('#form-task_interface_relation-add').serialize());
            }
        }

        $("#interfaceId").change(function () {
            var desc = $(this).find("option:selected").text();
            $("#description").val('');
            if(desc != null){
                $("#description").val(desc);
            }
            var queryParam = $(this).find("option:selected").attr("data-queryParam");
            $("#queryParam").val('');
            if(queryParam != null){
                $("#queryParam").val(queryParam);
            }
            var bodyParam = $(this).find("option:selected").attr("data-bodyParam");
            $("#bodyParam").val('');
            if(bodyParam != null){
                $("#bodyParam").val(bodyParam);
            }
            var pathParam = $(this).find("option:selected").attr("data-pathParam");
            $("#pathParam").val('');
            if(pathParam != null){
                $("#pathParam").val(pathParam);
            }
        });

        $("#taskId").change(function () {
            var taskId = ($(this).val());
            if(taskId == ""){
                $("#dependRelationIds").empty();
                return;
            }
            $.ajax({
                url:'/tester/task_interface_relation/list',
                data:{"taskId":taskId},
                type:'post',
                dataType: "json",
                contentType:'application/x-www-form-urlencoded',
                success:function (repdata) {
                    if (repdata.code == '0') {
                        $("#fullRelationIds").empty();
                        for(var i=0; i<repdata.rows.length; i++){
                            $("#fullRelationIds").append("<option ondblclick=\"chooseRelation(this)\"" +
                                " value="+repdata.rows[i].relationId+">"+repdata.rows[i].description+"</option>");
                        }

                    }
                }
            });
        });

        function chooseRelation(choosed) {
            $('#dependRelationIds').find('option[value="'+choosed.value+'"]').remove();
            $('#dependRelationIds').append("<option ondblclick='unchooseRelation(this)' value="+choosed.value+">"+choosed.text+"</option>");
        }
        function unchooseRelation(unchoosed) {
            $('#dependRelationIds').find('option[value="'+unchoosed.value+'"]').remove();
        }

        $('#dependParam').on('keydown',function(event){
            if(event.keyCode == 9){
                event.preventDefault();//阻止浏览器默认动作
                var text = $('#dependParam').val();
                var pureText = "";
                for (var i=0; i<text.length; i++){
                    var c = text.charAt(text.length-1-i);
                    if(c == '.' || c == '=' || c == ' '){
                        break;
                    }
                    pureText = c + pureText;
                }
                pureText = pureText.trim();
                for(var i=0; i<suggestArray.length; i++){
                    var exp = suggestArray[i];
                    if(exp.startsWith(pureText)){
                        var toAppend = exp.substr(pureText.length);
                        $("#dependParam").val(text+toAppend);
                        return;
                    }
                }
            }
        });

        $('#dependParam').on('input', function() {
            var text = $(this).val();
            var pureText = "";
            for (var i=0; i<text.length; i++){
                var c = text.charAt(text.length-1-i);
                if(c == '.' || c == '=' || c == ' '){
                    break;
                }
                pureText = c + pureText;
            }
            pureText = pureText.trim();

            $("#suggest").empty();
            for(var i=0; i<suggestArray.length; i++){
                var exp = suggestArray[i];
                if(exp.startsWith(pureText)){
                    $("#suggest").append("<li>"+exp+"</li>");
                }
            }
        })
    </script>
</body>
</html>
